<!DOCTYPE html>
<html>
<head>
    <title>立方体</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/three.min.js"></script>
</head>
<body onload="init()">
<canvas id="mainCanvas" style="width: 800px;height: 600px;"></canvas>
</body>
<script>
    /*
    * 圆形 CircleGeometry
    *   CircleGeometry(radius,segments,thetaStart,thetaLength)
    *   radius:半径
    *   segments:切片数
    *   thetaStart:开始的弧度
    *   thetaLength:跨过的弧度
    * 圆柱体 CylinderGeometry
    *   CylinderGeometry(radiusTop,radiusBottom,height,radiusSegments,heightSegments,openEnded)
    *   radiusTop、radiusBottom:分别为顶面与底面的半径
    *   height:高
    *   radiusSegments,heightSegments:切片数
    *   openEnded:布尔值，是否没有顶面与底面
    *
    * 正四面体 TetrahedronGeometry
    *   TetrahedronGeometry(radius,detail)
    * 正八面体 OctahedronGeometry
    *   OctahedronGeometry(radius,detail)
    * 正二十面体 IcosahedronGeometry
    *   OctahedronGeometry(radius,detail)
    *   radius:半径
    *   detail:层次的层数
    * 圆环面 TorusGeometry
    *   TorusGeometry(radius,tube,radialSegments,tubularSegments,arc)
    *   radius:半径
    *   rube:管道半径
    *   radialSegments、tubularSegments:分别为两个的切片数
    *   arc:圆环面的弧度，缺省为Math.PI*2
    * 圆环结 TorusKnotGeometry
    *   TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q, heightScale)
    *   p、q:控制其样式的参数，一般可以缺省
    *   heightScale:在z轴方向上的缩放。
    * */
    function init(){
        var scene = new THREE.Scene();

        var renderer = new THREE.WebGLRenderer({
            canvas:document.getElementById('mainCanvas')
        });
        renderer.setClearColor(0x000000);

        var camera = new THREE.PerspectiveCamera(60,800/600,1,10);
        camera.position.set(4,4,5);
        camera.lookAt(new THREE.Vector3(0,0,0));
        scene.add(camera);
        //圆形
        /*var circle = new THREE.Mesh(new THREE.CircleGeometry(3,18,Math.PI,Math.PI/3*4),
                        new THREE.MeshBasicMaterial({
                            color:0xff0000,
                            wireframe:true
                        }));
        scene.add(circle);*/
        //标准圆柱体
        /*var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2,2,4,18,3),
                        new THREE.MeshBasicMaterial({
                            color:0xff0000,
                            wireframe:true
                        }));
        scene.add(cylinder);*/
        //无顶面与底面的圆台
        var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2,3,4,18,3,true),
                new THREE.MeshBasicMaterial({
                    color:0xff0000,
                    wireframe:true
                }));
        scene.add(cylinder);

        renderer.render(scene,camera);
    }
</script>
</html>